import React, { useEffect } from "react";
import { useAuth } from '../context/AuthProvider';
import { View, Text, Image, StyleSheet, ImageBackground } from 'react-native';
import { AntDesign } from "@expo/vector-icons";

const AboutApp = ({ navigation }) => {
    const Center = () => {
        navigation.navigate('Setting')
    }
    useEffect(() => {
        navigation.setOptions({
            headerLeft: () => (
                <View style={{ width: 100 }}>
                    <Text onPress={() => Center()}>
                        <AntDesign
                            name='arrowleft'
                            size={25}
                            color="black"
                        />
                    </Text>
                </View>
            ),
        })
    }, [])

    return (
        <View style={{ flex: 1 }}>
            <ImageBackground source={require('../img/bgimg.jpg')} style={styles.bgimg}>
                <View>
                    <Image
                        source={require('../icon/头像.jpg')}
                        style={{
                            width: "30%",
                            height: 130,
                            marginLeft: "35%",
                            borderRadius: 30,
                            marginTop: 30
                        }}
                    />
                    <Text style={{
                        fontSize: 25,
                        textAlign: "center",
                        verticalAlign: "middle",
                        marginTop: 30
                    }}>校园借物</Text>
                    <Text style={{
                        fontSize: 15,
                        textAlign: "center",
                        verticalAlign: "middle",
                        marginTop: 10
                    }}>版本1.0</Text>
                </View>
                <View style={{width:"80%",marginLeft:"10%"}}><Text style={{
                    fontSize: 20,
                    textAlign: "center",
                    verticalAlign: "middle",
                    marginTop: 30,
                    borderBottomColor:"grey",
                    borderBottomWidth:2,
                    height:50,
                    borderTopColor:"grey",
                    borderTopWidth:2
                }}>功能介绍</Text></View>
                <View style={{width:"80%",marginLeft:"10%"}}><Text style={{
                    fontSize: 20,
                    textAlign: "center",
                    verticalAlign: "middle",
                    borderBottomColor:"grey",
                    borderBottomWidth:2,
                    height:50,
                }}>投诉</Text></View>
                <View style={{width:"80%",marginLeft:"10%"}}><Text style={{
                    fontSize: 20,
                    textAlign: "center",
                    verticalAlign: "middle",
                    borderBottomColor:"grey",
                    borderBottomWidth:2,
                    height:50
                }}>检查新版本</Text></View>
            </ImageBackground >
        </View >

    );
}

const styles = StyleSheet.create({
    bgimg: {
        flex: 1,
        resizeMode: "cover",
        height: 1000
    },
});

export default AboutApp